<template>
  <div id="sear" style="background: #fff; padding-top: 10px">
    <van-sticky z-index="111">
      <div id="search">
        <input
          type="text"
          class="search"
          v-model="valueSerach"
          placeholder="搜索达人/商品/直播"
          @keyup.enter="$emit('returnBack', valueSerach)"
          onfocus="if(this.value=='搜索达人/商品/直播'){this.value=''};this.style.color='#333';"
        />
        <img
          src="@/assets/two/seach.png"
          class="searchicon"
          name="search"
          @click=" $emit('returnBack', valueSerach)"
        />
      </div>
    </van-sticky>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      valueSerach: ''
    };
  },
  props: ['active'],
  model: {
    prop: 'valueSerach',
    event: 'returnBack'
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    valueSerach(newvalue) {
      this.$emit('returnBack1', this.valueSerach);
      // console.log(newvalue);
    },
    active(newvalue) {
      this.valueSerach = '';
    }
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang="less">
#search {
  position: relative;
  width: 9.24rem;
  background: #fff;
  margin: 0 auto;
  text-align: center;
  height: 0.906667rem;
  .search {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 0.4rem;
    width: 9.2rem;
    height: 100%;
    line-height: 0.906667rem;
    background-color: #f1f1f1;
    border: none;
    border-radius: 0.453333rem;
    font-size: 0.346667rem;
    color: #b5b5b5;
    box-sizing: border-box;
    padding-right: 1.2rem;
  }

  .searchicon {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 0.26rem;
    right: 0.733333rem;
    color: #b5b5b5;
  }

  .van-ellipsis {
    overflow: hidden;
    text-overflow: clip !important;
  }
}
</style>
